<template>
  <div>
    <div class="title">{{ title }}</div>
    <div class="center" style="display:flex;justify-content:space-between;padding:0 30px 0 15px;margin-top: 20px;">
      <div class="fail">
        <div class="circle"></div>
        <div class="text"> 错误率：6%</div>
      </div>
      <div class="success">
        <div class="circle"></div>
        <div class="text">稳定率：94%</div>
      </div>
    </div>
    <div class="chart" ref="chart" style="height:140px;margin-top: 10px;">
    </div>
  </div>
</template>
<script>
import { TinyArea } from '@antv/g2plot';
export default {
  props: ['title'],
  data() {
    return {

    }
  },
  methods: {
    loadArea() {
      const tinyArea = new TinyArea(this.$refs.chart, {
        height: 60,
        autoFit: false,
        data: [500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500],
        smooth: true,
        areaStyle: {
          fill: 'l(90) 0:#a8e0d4 1:#ffffff'
        },
        point: {
          color: 'l(90) 0:#a8e046 1:#ffffff',
          size: (datum) => 2
        },
      });

      tinyArea.render();

    }
  },
  mounted() {
    this.loadArea()
  }
}
</script>
<style lang="scss" scoped>
.title {
  padding: 10px 0 0 10px;
  font-size: 14px;
  color: #666;

}

.center {
  font-size: 14px;
  color:#666;
  .fail {
    display: flex;
    align-items: center;

    .circle {
      width: 8px;
      height: 8px;
      background-color: red;
      border-radius: 50%;
      margin-right: 5px;
    }
  }

  .success {
    display: flex;
    align-items: center;

    .circle {
      width: 8px;
      height: 8px;
      background-color: green;
      border-radius: 50%;
      margin-right: 5px;
    }
  }
}</style>